<!--第一天 4、todoList列表-->
<script setup lang="ts">
import {computed, reactive, ref} from "vue";

interface ListObjType {
  id:number,
  title:string,
  isChoose:boolean
}
let list=reactive<ListObjType[]>([{id:0,title:'吃饭',isChoose:false},{id:1,title:'睡觉',isChoose:false}])
let inputValue=ref<string>('')

// 选中不选中的框
function changeChecking(item:ListObjType) {
  // console.log(1)
  item.isChoose=!item.isChoose
}

// 删除按钮
function del(i:number){
  // console.log(i)
  list.splice(i,1)
}

// 添加按钮
function add(){
  // console.log(inputValue.value)
  list.push({
    id:list[list.length-1]?.id+1||0,   //?的意思是：当前面的东西list[list.length-1]存在时，走.id+1,否则为0
    title:inputValue.value,
    isChoose:false
  })
  inputValue.value=''
}



// 完成的个数
let completeNum=computed(()=>{
  return list.filter(item=>item.isChoose).length
})
</script>

<template>
  <div>共有{{list.length}}条数据，其中{{completeNum}}条已完成</div>
<input type="text" v-model="inputValue"><button @click="add">添加</button>
<ul>
  <li v-for="(item,index) in list" :key="item.id">
    <input type="checkbox" :checked="item.isChoose" @change="changeChecking(item)">
    <span :class="item.isChoose?'del':''">{{item.title}}</span>
  <button @click="del(index)">删除</button>
  </li>

<!--  <li>-->
<!--    <input type="checkbox">-->
<!--    睡觉-->
<!--    <button>删除</button>-->
<!--  </li>-->
</ul>
</template>

<style scoped>
ul {
  list-style: none;

  .del {
    text-decoration: line-through;
  }
}
</style>
